<template>
  <div class="right-box" :class="{ 'hidden-icon': ishidden }" v-if="rightOpen">
    <div class="fold-icon" @click="closeRightBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': ishidden }" />
      </el-icon>
    </div>
    <div class="right-heard">
      <div class="title-box">
        <span class="title-font">河段-</span>
        <span class="title-font-color">{{ props.sectionObj.title }}</span>
      </div>
    </div>
    <div class="right-main">
      <div class="main-title title-font-color">河段基本信息</div>
      <div class="basics-box">
        <div class="basics-box-item">
          <span class="item-font">河段名称</span>
          <span class="item-font font-color">{{ '杨家横盘龙' }}</span>
        </div>
      </div>
      <div class="main-title title-font-color">所属预报断面</div>
      <div class="basics-box">
        <div class="basics-box-item">
          <span class="item-font">预报断面名称</span>
          <span class="item-font font-color">{{ '盘龙' }}</span>
        </div>
        <div class="basics-box-item">
          <span class="item-font">预报断面编码</span>
          <span class="item-font font-color">{{ 'Sd23999' }}</span>
        </div>
      </div>
      <div class="main-title title-font-color">河段内小流域河道</div>
      <div class="section-box">
        <el-table
          border
          :data="state2.sectionData"
          height="100%"
          size="small"
          show-overflow-tooltip
        >
          <el-table-column prop="topNumber" label="河段编号" show-overflow-tooltip="true" />
          <el-table-column prop="numName" label="上接河段编号" show-overflow-tooltip="true" />
          <el-table-column prop="numName" label="下接河段编号" show-overflow-tooltip="true" />
          <el-table-column prop="numName" label="入流节点编号" show-overflow-tooltip="true" />
          <el-table-column prop="numName" label="出流节点" show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.id)"
                >详情</el-button
              >
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.id)"
                >定位</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-title title-font-color">
        <div class="title-left">
          <span class="title-margin">河道内测量断面</span>
        </div>
        <span class="edit-bg2">筛选测量断面</span>
      </div>
      <div class="section-box">
        <el-table :data="state2.sectionData" height="100%" size="small" show-overflow-tooltip>
          <el-table-column prop="topNumber" label="河道测量断面" show-overflow-tooltip="true" />
          <el-table-column prop="numName" label="经纬度" show-overflow-tooltip="true" />
          <el-table-column label="是否入流映射" align="center">
            <template #default="scope">
              <el-radio-group v-model="radio1" class="ml-4">
                <el-radio :label="scope.row">&nbsp;</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="是否出流映射" align="center">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row">&nbsp;</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.id)"
                >定位</el-button
              >
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from 'vue'
import emitter from '@/utils/bus'

const state2 = reactive({
  placeholderOne: '大汶河流域',
  optionsOne: [
    {
      value: '1',
      label: '大汶河流域'
    }
  ],
  dataList: [
    {
      title: '盘龙',
      id: 1
    },
    {
      title: '马盘龙',
      id: 2
    }
  ],
  sectionData: [
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 1
    },
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 2
    },
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 3
    }
  ]
})
// 如果有value则不是返回上一个页面 而是跳转
const emit = defineEmits(['clickDiglog'])

const ishidden = ref(false)
const rightOpen = ref(false)

const closeRightBox = () => {
  ishidden.value = !ishidden.value
  emit('clickDiglog', true)
}
emitter.on('openRightDiglog', (value) => {
  if (value === 1) {
    rightOpen.value = true
  } else {
    rightOpen.value = false
  }
})
const props = defineProps({
  sectionObj: {
    type: Object,
    default: () => ({})
  },
  rightBox: {
    type: Boolean,
    default: true
  }
})
watchEffect(() => {
  ishidden.value = props.rightBox
})
</script>

<style lang="less" scoped>
.right-box {
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: var(--fold-bg-color);
  border: 1px solid var(--fold-border-color);
  box-sizing: border-box;
  transition: right 1s;
  border-radius: 4px;
  &.hidden-icon {
    right: -800px;
    transition: right 1s;
  }
  .title-font-color {
    color: var(--fold-word-color);
  }
  .fold-icon {
    width: 20px;
    height: 120px;
    line-height: 120px;
    position: absolute;
    background: #eee;
    top: 50%;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    transform: translateY(-50%);
    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
      to {
        opacity: 1;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
    }
    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;
      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .right-heard {
    display: flex;
    justify-content: space-between;
    margin: 0 15px 0 15px;
    box-sizing: border-box;
    height: 60px;
    border-bottom: 1px solid var(--fold-border-color);
    line-height: 60px;
    .title-box {
      font-size: var(--header-fontsize);
      .title-font {
        font-weight: 600;
      }
    }
  }
  .right-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 60px);
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    font-size: var(--content-fontsize);
    .main-title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      .title-left {
        // width: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-margin {
          margin-right: 50px;
        }
      }
      .edit-bg {
        background: url(@/assets/images/basicsConfig/u26.png) no-repeat;
        background-size: 100% 100%;
        height: 28px;
        width: 30px;
        margin-right: 10px;
        cursor: pointer;
      }
      .edit-bg2 {
        padding: 0 20px;
        background-color: #1296db;
        color: #ffffff;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .basics-box {
      padding: 0 20px;
      .basics-box-item {
        margin-bottom: 20px;
        .item-font {
          font-weight: 400;
          margin-right: 30px;
          color: #797979;
        }
        .font-color {
          color: black;
        }
      }
    }
    .dm-box {
      display: flex;
      .item-margin {
        margin-right: 60px;
      }
    }
    .section-box {
      padding: 0 20px;
      height: 170px;
      width: 100%;
      margin-bottom: 10px;
    }
  }
}
</style>
